<template>
	<div class="content55">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">{{ $t('Hợp đồng tài chính') }}</div>
		</header>
		<div class="box" id="hetong" v-if="show">
			<!-- <h1 style="font-size: 18px; text-align: center;">{{ $t('Mizuho Bank JSC (Hợp đồng cho vay)') }}</h1>
			<div style="margin: 30px 0; border-bottom: 1px dashed #333;">&nbsp;</div>
			<div style="font-size: 14px;">
				<span style="font-weight: 600;">{{ $t('Thanh toán hàng ngày') }}: </span>
				<span class="r-applicationTime" v-text="data.date"></span>
			</div>
			<div style="font-size: 14px;"><span style="font-weight: 600;">{{ $t('Mật khẩu') }}: </span>{{ data.order }}</div>
			<div style="font-size: 14px;">
				<span style="font-weight: 600;">{{ $t('Tên ứng viên') }}: </span>
				<span v-text="data.personal.name"></span>
			</div>
			<div style="font-size: 14px;">
				<span style="font-weight: 600;">{{ $t('Nhà ở') }}: </span>
				<span v-text="data.personal.address"></span>
			</div>
			<div style="font-size: 14px;">
				<span style="font-weight: 600;">{{ $t('Số điện thoại') }}: </span>
				<span v-text="data.mobile"></span>
			</div>
			<div style="font-size: 14px;">
				<span style="font-weight: 600;">{{ $t('Tên ngân hàng') }}: </span>
				<span v-text="data.bank.bank_name"></span>
			</div>
			<div style="font-size: 14px;">
				<span style="font-weight: 600;">{{ $t('Số thẻ ngân hàng') }}: </span>
				<span v-text="data.bank.bank_number"></span>
			</div>
			<div style="font-size: 14px;">&nbsp;</div>
			<div style="border: 1px dashed #333;">
				<div style="line-height: 50px; font-size: 18px; font-weight: 600; text-align: center;">{{ $t('Nội dung hợp đồng') }}</div>
				<div style="background: #000; color: #fff; font-weight: 600; padding: 10px;">{{ $t('Chủ đề: Ngân hàng Mizuho GmbHỨng dụng vay tiền mặt hàng tháng') }}<span style="flex: 1; padding: 5px 10px; position: relative;"><span class="r-period">{{
						$route.query.months }}</span></span></div>
				<div style="padding: 10px;">{{ $t('Gracias por elegir Mizuho Bank co., Ltd. como una empresa de préstamos personales no garantizada.Notificar la aprobación del préstamo de acuerdo con las condiciones anteriores y de acuerdo con los siguientes principios') }}:</div>
			</div>
			<ul style="padding: 0; border: 1px solid #333; margin-top: 20px;">
				<li style="display: flex; margin-bottom: 1px;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Lãi suất cho vay') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;">{{ $t('Trả góp') }}<br><em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
				<li style="display: flex; margin-bottom: 1px;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Thời hạn vay') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;"><span class="r-period">{{ months
							}}</span> Mace<em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
				<li style="display: flex; margin-bottom: 1px;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Số tiền vay') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;"><span class="r-currency">¥</span> <span
							class="r-loanAmount">{{ amount }}</span><em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
				<li style="display: flex; margin-bottom: 1px;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Lãi suất cho vay') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;">{{ $t('Lãi suất cố định') }}<br><em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
				<li style="display: flex; margin-bottom: 1px;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Lãi suất') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;"><span class="r-loanRate">{{
							rate }}</span>%
						/Un mes<em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
				<li style="display: flex; margin-bottom: 1px;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Hiệu lực của thông báo kỷ luật') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;">{{ $t('Thời hạn có hiệu lực là một tháng kể từ ngày thông báo xử lý kỷ luật được ban hành') }}<br><em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
				<li style="display: flex; margin-bottom: 0;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Tỷ lệ hợp đồng cho vay điện tử, thuế tem (có thể hoàn trả)') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;">10% {{ $t('Yên Nhật') }}<br><em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
			</ul>
			<ul style="padding: 0; border: 1px solid #333;">
				<li style="display: flex; margin-bottom: 1px;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Tất cả các loại thuế, hoa hồng và thuế hiện hành phải được thanh toán theo quy định của pháp luật') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;">{{ $t('Chi phí xử lý và các chi phí liên quan sẽ được lập hóa đơn trước khi vay.Tổng số tiền lãi phải trả trong thời gian vay') }}<br><em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
				<li style="display: flex; margin-bottom: 0;"><span
						style="flex: 1; padding: 5px 10px; position: relative; color: #fff; background: #333;">{{ $t('Xem này.Theo các điều khoản và điều kiện, từ ngày đáo hạn trả góp, lãi suất trả chậm được tính hàng tháng với lãi suất 0,4% (4,8% trong một năm)') }}</span><span
						style="flex: 1; padding: 5px 10px; position: relative;">{{ $t('Đặc biệt: Khoản vay của bạn trước đây đã được Mizuho Bank Ltd chấp thuận.Trong một số trường hợp, các tổ chức tài chính đối tác của chúng tôi có thể tiến hành kiểm tra đặc biệt đối với tín dụng của họ và yêu cầu tính thêm phí') }}<br><em
							style="position: absolute; height: 1px; background: #333; width: 100%; left: 0; bottom: -1px;">&nbsp;</em></span>
				</li>
			</ul>
			<div style="padding: 10px; border: 1px solid #333;"><span
					style="flex: 1; padding: 5px 10px; position: relative;"><span class="r-currency">&nbsp;
						<span v-text="data.personal.name"></span>
						<span v-if="data.personal.gender === 1">- {{ $t('Vâng') }}</span>
						<span v-if="data.personal.gender === 0">{{ $t('Tên') }}</span>
						. {{ $t('Tài khoản ngân hàng tiền lương được chỉ định tại thời điểm nộp đơn xin vay sau khi đồng ý với các điều kiện trên') }} <span class="r-loanAmount">{{ $route.query.amount
							}}</span><span class="r-loanAmount">&nbsp;Yên {{ $t('Nhật') }}</span></span></span>,
				{{ $t('Thanh toán trực tiếp') }}</div>
			<div style="margin-top: 20px;">
				<ol>
					<li>{{ $t('Điều khoản hợp đồng/Số tiền vay') }}</li>
				</ol>
				<p>{{ $t('Là người ký kết trước hợp đồng này (sau đây gọi là Người vay)') }}</p>
				<p>{{ $t('Người vay và Công ty (sau đây gọi là Người cho vay) cam kết tuân thủ các vấn đề và điều kiện của Thỏa thuận này. Các câu hỏi và điều kiện cụ thể như sau') }}:。</p>
				<p>1{{ $t('Thỏa thuận tín dụng luân chuyển chung (Đồng ý) là thỏa thuận tín dụng luân chuyển chung của người cho vay') }}.&nbsp;(「{{ $t('Dự án') }}」)
					{{ $t('Hoàn toàn hiệu quả') }}&nbsp;{{ $t('Trong hợp đồng tín dụng và giao dịch luân phiên, các bên ký hợp đồng thường phải cung cấp tín dụng sau khi được công ty trong hợp đồng chấp thuận và đăng ký chung về tín dụng luân phiên (sau đây gọi là ủy thác · đồng ý)') }}.&nbsp;（Từ giờ trở đi, nó được gọi là "khách hàng".）。
				</p>
				<p>2{{ $t('Công ty quyết định có công nhận hạn mức tín dụng hay không. Khi Công ty chấp thuận đơn xin hạn mức tín dụng của Khách hàng, Công ty sẽ thông báo cho Khách hàng về hạn mức tín dụng bằng thư, điện thoại hoặc các phương tiện được công nhận khác') }}</p>
			</div>
			<p>2.{{ $t('Thỏa thuận và điều kiện vay vốn') }}</p>
			<p>1. {{ $t('Kết quả phân tích của ngân hàng cho thấy công ty đã tính đến rủi ro khi cung cấp hạn mức tín dụng cho người vay.Người vay là、&nbsp;Bạn phải đồng ý với việc kiểm tra rủi ro thanh khoản. 20% đến 50% các khoản vay của công ty được sử dụng để lập hồ sơ tín dụng trả góp cho các khoản vay cá nhân (đôi khi thay đổi tùy thuộc vào đánh giá của các tổ chức nghiên cứu tín dụng) Kiểm tra khả năng thanh toán tối thiểu của người vay') }}。&nbsp;</p>
			<p>2.{{ $t('Người vay đảm bảo rằng số tiền vay sẽ không được sử dụng vô cớ cho các mục đích bất hợp pháp') }}。</p>
			<p>3.{{ $t('Trách nhiệm chấm dứt hợp đồng') }}&nbsp;&nbsp;&nbsp;</p>
			<p>(1){{ $t('Sau khi hợp đồng này được ký kết (không được trình bày để thảo luận và bị coi là vô hiệu), các bên phải tuân thủ tất cả các điều kiện và vấn đề của hợp đồng này.Trong trường hợp một bên vi phạm các điều khoản và vấn đề của hợp đồng, bên kia có quyền khởi kiện trước Tòa án nhân dân') }}&ZeroWidthSpace;&ZeroWidthSpace;{{ $t('Trên cơ sở không có sự phản đối của các bên, bên vi phạm sẽ dựa trên số tiền vay.Bạn phải trả 50% số tiền bị vỡ nợ') }}</p>
			<p>(2){{ $t('Người vay phải đảm bảo rằng số tiền vay không được sử dụng cho các mục đích bất hợp pháp bị nhà nước cấm') }}</p>
			<p>(3){{ $t('Người vay phải hoàn trả số tiền vay trong thời hạn đã thỏa thuận trong hợp đồng. Nếu người vay muốn gia hạn thời hạn cho vay, họ phải nộp đơn cho người cho vay năm ngày trước khi hết hạn.Nếu người vay muốn trả lại số tiền vay trước thời hạn, họ phải nộp đơn cho người cho vay năm ngày trước thời hạn trả nợ tiếp theo') }}</p>
			<p>4.{{ $t('Nếu người vay được chấp thuận cho vay, một số khách hàng đủ điều kiện có lịch sử tín dụng kém, người cho vay trước tiên phải xác nhận danh tính của họ.Người vay không thể thanh toán bằng chuyển khoản phải thanh toán cho khách hàng') }}&nbsp;{{ $t('Bạn phải liên hệ với dịch vụ để hoàn thành thanh toán trước. Người vay chỉ có thể xác nhận thanh toán sau lần thanh toán đầu tiên') }}</p>
			<p>5. {{ $t('Theo quy định của hệ thống tài chính Nhật Bản, người cho vay chịu rủi ro về số tiền vay được đảm bảo cho người vay và phải xác nhận khả năng thanh toán tối thiểu cá nhân của người vay đủ điều kiện. Người vay phải dựa trên số tiền vayg') }}.&nbsp; &nbsp; 20% 
				
				{{ $t('Bắt đầu với...50% NTôi cần gửi tiền vào tài khoản của mình. 30 phút sau khi ngân hàng chấp thuận, ngân hàng sẽ chuyển tiền vào tài khoản được chỉ định trong hợp đồng của người vay.Nếu người vay không tuân thủ các điều khoản của hợp đồng sau khi hợp đồng được ký kết, công ty sẽ bị coi là gian lận đáng kể và cố ý và sẽ bị tòa án Nhật Bản truy tố và xử phạt theo quy định của pháp luật') }}</p>
			<p>6.{{ $t('Người vay không thực hiện hợp đồng phải chịu trách nhiệm về những tổn thất phát sinh.Do đó, người vay có thể xác nhận tất cả các chi phí phát sinh, bao gồm chi phí kiện tụng, chi phí luật sư, hoàn trả chi phí luật sư và các chi phí khác phải trả, dựa trên bằng chứng của người vay.Người vay trả lời Người cho vay đọc và hiểu các tài liệu hợp đồng') }}</p>
			<p>7.{{ $t('Người vay không thực hiện hợp đồng phải chịu trách nhiệm về những tổn thất phát sinh.Do đó, người vay có thể xác nhận tất cả các chi phí phát sinh, bao gồm chi phí kiện tụng, chi phí luật sư, hoàn trả chi phí luật sư và các chi phí khác phải trả, dựa trên bằng chứng của người vay.Người vay trả lời Người cho vay đọc và hiểu các tài liệu hợp đồng') }}</p>
			<p>8.{{ $t('Điều kiện bảo lãnh: Ngân hàng Tokyo Star, Ngân hàng Thương mại Nhật Bản và Ngân hàng Mizuho cùng phát hành số tiền vay.Trong thời gian vay, người vay phải tuân thủ và tuân thủ tất cả các điều kiện của hợp đồng thanh toán lãi suất trong thời gian ① và thanh toán tiền gốc trong thời gian ③.Nếu vi phạm quy định trên, người vay sẽ có lịch sử tín dụng cá nhân xấu do hệ thống tín dụng ngân hàng tạo ra') }}</p>
			<h2 style="font-size: 15px;">{{ $t('Chính sách hoàn tiền và hủy bỏ') }}</h2>
			<div style="padding: 10px; border: 1px dashed #333;">{{ $t('Bất kỳ khoản thanh toán bổ sung nào sẽ được hoàn trả cùng với khoản vay được kiểm soát.Dịch vụ không bị hủy khi số tiền vay được gửi vào tài khoản ngân hàng') }}</div> -->
			<div v-html="data.aggrement"></div>
			<div style="display: flex; margin-top: 20px;">
				<div style="flex: 1; position: relative; padding-bottom: 20px;">
					<div style="font-size: 16px; font-weight: 600;position: relative;z-index: 3;">{{ $t('Ngân hàng Mizuho') }}.</div>
					<div style="font-size: 17px; font-weight: 600; margin-top: 80px; text-align: center;position: relative;z-index: 3;">{{ $t('Chữ ký') }}</div>
					<div
						style="position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 80px); z-index: 2;">
						<img style="object-fit: contain; width: 70%;" crossorigin=“anonymous” :src="esignUrl + data.hetong">
					</div>
				</div>
				<div style="flex: 1; position: relative; padding-bottom: 20px; margin-left: 20px;">
					<div style="font-size: 16px; font-weight: 600;position: relative;z-index: 3;">{{ $t('Ghi nợ') }}</div>
					<div
						style="position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 80px); z-index: 2;">
						<img style="object-fit: contain; width: 70%;" crossorigin=“anonymous” :src="esignUrl + data.pic">
					</div>
				</div>
			</div>
		</div>
		<div style="padding: 0 20px;"><button class="topup" @click="save"
				style="width:100%;box-sizing: border-box;">{{ $t('Lưu dưới dạng ảnh') }}</button></div>
	</div>
</template>

<script>
import html2canvas from 'html2canvas';
import AJAX from '@/utils/http';
export default {
	data() {
		return {
			data: {},
			months: '',
			rate: '',
			amount: '',
			show: false,
		};
	},
	created() {
		this.months = this.$route.query.months || '';
		this.rate = this.$route.query.rate || '';
		this.amount = this.$route.query.amount || '';
		this.fetchData();
	},
	computed: {
		esignUrl() {
			const url = new URL(AJAX.defaults.baseURL);
			const origin = url.origin;
			return this.data.hetong ? origin : '';
		},
	},
	methods: {
		save() {
			html2canvas(document.getElementById('hetong')).then(canvas => {
				const url = canvas.toDataURL('image/png');
				const a = document.createElement('a');
				a.href = url;
				a.download = this.$t('融資契約')+'.png';
				a.click();
			});
		},
		fetchData() {
			AJAX.post('/index/aggrement', {}).then(e => {
				this.data = e.data;
				this.show = true;
				this.amount = e.data.order_info.money;
				this.months = e.data.order_info.month;
				this.rate = e.data.rate;
			});
		},
	}
};
</script>

<style scoped>
.box {
	min-height: 100%;
	padding: 12px;
	background: rgb(255, 255, 255);
	font-size: 14px;
}
</style>